<template>
    <el-dialog title="编辑权限组" :visible.sync="dialogVisible" width="700px">
        <div style="max-height: 400px; overflow-y: auto;">
            <div style="overflow: auto; max-height: 600px;">
                <!-- 表单内容 -->
                <el-form ref="form" :model="form" label-width="80px" size="small">
                    <el-form-item label="运营方" prop="name">
                        <el-select v-model="form.tenantId" placeholder="请选择" style="width: 99%;">
                            <el-option
                                v-for="item in operateList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色名称" prop="name">
                        <el-input v-model="form.name" style="width: 99%;"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" style="width: 99%;"></el-input>
                    </el-form-item>
                    <el-form-item label="权限" prop="remark">
                        <el-tree
                            default-expand-all
                            ref="tree"
                            :data="permitData"
                            show-checkbox
                            :check-strictly="true"
                            node-key="id"
                            :props="{
                                children: 'children',
                                label: 'name'
                            }"
                            @check="handleCheckedChange"
                        ></el-tree>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
              <el-button type="primary" @click="clickToChangePermit" size="small">确 定</el-button>
            </span>
        </div>

    </el-dialog>
</template>

<script>
import {upDateRole} from "@/admin/api/admin/backStage/role/role";
import {permitList} from "@/admin/api/admin/backStage/permit/permit";
import {tenantList} from "@/admin/api/admin/operator/operator"

export default {
    data() {
        return {
            dialogVisible: false,
            id: 0,
            form: {
                name: "",
                remark: "",
                permit: "",
                tenantId: ''
            },
            permitData: [],
            checkedNodes: [],
            operateList: []
        };
    },
    mounted() {
        this.getData();
        this.getOperateList();
    },
    methods: {
        showDialog(e, row) {
            this.form = row;
            setTimeout(_ => {
                this.$refs.tree.setCheckedKeys(row.permit.split(","))
            }, 500)
            this.dialogVisible = !this.dialogVisible;
        },
        getData() {
            permitList({mode: "tree"}).then((res) => {
                if (res.code == 200) {
                    this.permitData = res.data.items;
                }
            });
        },
        handleCheckedChange(checkedNodes) {
            // checkedNodes 包含当前被勾选的节点信息，可以根据实际情况处理

            // 递归更新父节点的选中状态
            const updateParentChecked = node => {
                // 如果当前节点有子节点
                if (node.children && node.children.length > 0) {
                    // 检查所有子节点的勾选状态
                    const childrenChecked = node.children.some(child => child.checked);

                    // 更新当前节点的勾选状态
                    node.checked = childrenChecked;

                    // 递归更新父节点
                    if (node.parent) {
                        updateParentChecked(node.parent);
                    }
                }
            };
            this.permitData.forEach(node => {
                updateParentChecked(node);
            });
        },
        clickToChangePermit() {
            if (this.$refs.form) {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        // 表单验证通过后的逻辑
                        this.form.permit = this.$refs.tree.getCheckedKeys().join(",")
                        upDateRole(this.form, this.form.id, this.form.tenantId).then((res) => {
                            if (res.code == 200) {
                                this.dialogVisible = false;
                                this.$refs["form"].resetFields();
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                });
                                this.$parent.getOperatorList();
                            } else {
                                this.$message({
                                    message: res.message,
                                    type: "error",
                                });
                            }
                        });
                    } else {
                        // 表单验证失败后的逻辑
                        this.$message({
                            message: '表单验证失败，请检查输入',
                            type: 'error',
                        });
                    }
                });
            } else {
                console.error('Form ref not found.');
            }

            this.checkedNodes.forEach(node => {
            });

        },
        getOperateList() {
            tenantList().then(res => {
                if (res.code == 200) {
                    this.operateList = res.data.items
                }
            })
        },

    },

};
</script>


<style lang="less" scoped>
.dialog-footer {
    margin: 20px 0 0 480px;
}
</style>
